import React from 'react';
import styles from './Review.module.css';

/* 复习统计组件，props如下：
-stats: { total: number; remembered: number; fuzzy: number; forgot: number; startTime: Date; }
-duration，number类型，可选;
*/
interface ReviewStatsProps {
  stats: {
    total: number;
    remembered: number;
    fuzzy: number;
    forgot: number;
    startTime: Date;
  };
  duration?: number;
}

const ReviewStats: React.FC<ReviewStatsProps> = ({ stats, duration }) => {
  const averageTimePerCard = duration ? Math.round(duration / stats.total * 10) / 10 : 0;

  return (
    <div className={styles.reviewStats}>
      <div className={styles.statItem}>
        <span className={styles.statLabel}>总卡片数：</span>
        <span className={styles.statValue}>{stats.total}</span>
      </div>
      <div className={styles.statItem}>
        <span className={styles.statLabel}>记住：</span>
        <span className={styles.statValue}>{stats.remembered}</span>
      </div>
      <div className={styles.statItem}>
        <span className={styles.statLabel}>模糊：</span>
        <span className={styles.statValue}>{stats.fuzzy}</span>
      </div>
      <div className={styles.statItem}>
        <span className={styles.statLabel}>忘记：</span>
        <span className={styles.statValue}>{stats.forgot}</span>
      </div>
      {duration && (
        <>
          <div className={styles.statItem}>
            <span className={styles.statLabel}>用时：</span>
            <span className={styles.statValue}>{duration} 分钟</span>
          </div>
          <div className={styles.statItem}>
            <span className={styles.statLabel}>平均每张：</span>
            <span className={styles.statValue}>{averageTimePerCard} 分钟</span>
          </div>
        </>
      )}
    </div>
  );
};

export default ReviewStats; 